import PlusIcon from "@heroicons/react/20/solid/PlusIcon"

const UniverseityMajorItem = ({data,addMajorToClonedSheet}) => {

    return (
        <div className="flex items-center justify-between py-2 rounded-md border-base-300 border shadow-lg m-2 p-2">
            <div className="flex flex-col items-start justify-center">
                <div className="flex flex-row items-end justify-center px-2 py-1">
                    <div className="text-base font-bold">{data.universityName}</div>
                    <div className="text-xs ml-2 font-semibold"> {data.provinceName} | {data.belong} | {data.type}| {data.category} | {data.tags}</div>
                </div>
                <div className="divider mx-4" />
                <div className="grid grid-cols-3 gap-4 mb-2">
                    {data.universityHistoryScore && data.universityHistoryScore.length > 0 
                    && data.universityHistoryScore.map((scoreItem, scoreIndex) => {
                        return (<>
                            <div key={scoreIndex} className="flex flex-row items-center justify-center text-xs rounded-lg mx-2 border border-base-300 bg-base-300 p-2">
                                <div className="mx-1">{scoreItem.year}年</div>
                                <div className="mx-1">{scoreItem.batch}/{scoreItem.submitType}</div>
                                <div className="mx-1">{scoreItem.score}分/{scoreItem.rank}位</div>
                            </div>
                        </>)
                    })}
                </div>
                <div className="grid grid-cols-4 gap-4">
                    {data.universityMajorRecruitScore && data.universityMajorRecruitScore.length > 0 
                    && data.universityMajorRecruitScore
                    .map((scoreItem, scoreIndex) => {
                        return (<>
                            <div key={scoreIndex} className="flex flex-col items-start justify-start text-xs rounded-lg mx-2 border border-base-300  p-2 hover:bg-base-300 hover:shadow-lg" 
                                onClick={() => addMajorToClonedSheet(scoreItem)}>
                                <div className="text-sm font-bold mx-1">{scoreItem.majorName}</div>
                                <div className="mx-1">{scoreItem.batch}</div>
                                <div className="mx-1">{scoreItem.score}分/{scoreItem.rank}位</div>
                                <div className="mx-1">{scoreItem.subjectRequireName}</div>
                                <div className="flex flex-row w-full items-center justify-end" >
                                    <PlusIcon className="justify-self-end h-8 w-8 text-red-500" />
                                </div>
                            </div>
                        </>)
                    })}
                </div>
            </div>
        </div>
    )
}

export default UniverseityMajorItem